<template>
	<view class="task" style="background: #FFFFFF;">
		<view class="task-content">
			<view>
				<!-- <uni-list v-show="taskList.length > 0"> -->
				<uni-list v-if="taskList.length > 0">
					<uni-list-item :show-arrow="false" v-for="(item, index) in taskList" :key="index">
						<view style="width: 100%;display: flex;" @click="taskItem(item.id)">
							<view style="width:76%;display: flex;">
								<image :src="item.label" style="border-radius: 100upx;width: 100upx;height: 100upx;background-size: 100%;"></image>
								<view style="width: 75%;margin-left: 20upx;">
									<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.title }}</view>
									<view style="width: 100%;font-size: 26upx;margin-top: 10upx;color: #999999;">ID:{{item.id}} <text style="margin-left: 20upx;">{{ item.endNum }}人已接，剩余{{ item.taskNum - item.endNum }}个</text></view>
									<view v-if="item.tag" style="font-size: 24upx;background: #fff5f4;padding: 5upx;width: max-content;margin-top: 5upx;color: #ef5b05;">{{item.tag}}</view>
								</view>
							</view>
							<view style="width: 24%;text-align: right;">
								<view style="text-align: right;margin-left: 10upx;margin-top: 10upx;font-size: 38upx;color: #ef5b05;font-weight: 600;">
									<text style="font-size: 28upx;height: 50upx;">+</text> {{ item.taskOriginalPrice }}元
								</view>
								<image src="../../static/img/task/top.png" v-if='item.isTop == 1' style="margin-left: 10upx;width: 40upx;height: 30upx;font-size: 20upx;;border-radius: 10upx;margin-right: 10upx;color: #FFFFFF;padding-left: 10upx;margin-top: 30upx;"></image>
							</view>
						</view>
					</uni-list-item>
				</uni-list>
				
			</view>
			<!-- 悬浮上拉 -->
			<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '', '']" style="bottom: 56px;"><text
				 class="iconfont icon-shangla"></text></view>

			<!-- 加载更多提示 -->
			<view class="s-col is-col-24" v-if="taskList.length > 0">
				<load-more :loadingType="contentText[loadingType]" :contentText="contentText"></load-more>
			</view>
			<!-- 加载更多提示 -->
			<empty v-if="taskList.length === 0" des="暂无数据" show="false"></empty>
		</view>
	</view>
	</view>
</template>

<script>
	import tuiIcon from '../../components/icon/icon';
	import tuiTag from '../../components/tag/tag';
	import uniList from '../../components/uni-list/uni-list.vue';
	import uniListItem from '../../components/uni-list-item/uni-list-item.vue';
	import tuiListCell from '../../components/list-cell/list-cell';
	import tuiLoadmore from '../../components/loadmore/loadmore';
	import tuiNomore from '../../components/nomore/nomore';
	import tuiTips from '../../components/tips/tips';
	import tNewsItem from '../../components/views/t-news-item/t-news-item.nvue';
	import tRtPopup from '../../components/views/t-rt-popup/t-rt-popup';
	import tuiButton from '../../components/thorui/tui-button/tui-button.vue';

	export default {
		components: {
			uniList,
			uniListItem,
			tuiIcon,
			tuiTag,
			tuiListCell,
			tuiLoadmore,
			tuiNomore,
			tuiTips,
			tNewsItem,
			tuiButton,
			tRtPopup
		},
		data() {
			return {
				taskList: [],
				rate: [],
				userState: '',
				classifyId: 0,
				tabSort: 0,
				page: 1,
				size: 10,
				cid: 0,
				type: 1,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onShow() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getUserInfo(userId);
				this.selectTask('');
			}
		},
		onLoad: function(options) {
			this.classifyId = options.id;
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getUserInfo(userId);
				this.selectTask('');
			}
		},
		methods: {
			getUserInfo(userId) {
				this.$Request.postJson('/app/selectUserById?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.userState = res.data.member;
					} else {
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg
						});
						this.$queue.logout();
					}
					uni.hideLoading();
				});
			},
			selectTask(type) {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				var userStateByMoney = 1;
				let userId = this.$queue.getData('userId');
				this.$Request.getJ('/helpClassify/selectHelpTaskByClassify?page=' + this.page + '&limit=' + this.size + '&classifyDetailsId=' + this.classifyId + '&userId=' + userId)
					.then(res => {
						console.log("任务列表: ",res);
						if (res.code === 0) {
							if (this.page === 1) {
								this.taskList = [];
							}
							for (var i = 0; i < res.data.pageUtils.list.length; i++) {
								var jiaqian = res.data.pageUtils.list[i].taskOriginalPrice;
								var ping = res.data.ping.rate;
								var zhishu = res.data.zhishu.rate;
								var feizhishu = res.data.feizhishu.rate;
								res.data.pageUtils.list[i].taskOriginalPrice = this.numFilter(jiaqian - (jiaqian * ping + jiaqian * zhishu + jiaqian *
									feizhishu));
								this.taskList.push(res.data.pageUtils.list[i]);
							}
							console.log("任务列表 result: ",this.taskList);
							if (res.data.pageUtils.list.length === this.size) {
								this.loadingType = 0;
							} else {
								this.loadingType = 3;
							}
						} else {
							this.loadingType = 2;
						}
						uni.hideLoading();
						if (type === 'Refresh') {
							uni.stopPullDownRefresh(); // 停止刷新
						}
					});
			},
			numFilter(value) {
				// 截取当前数据到小数点后三位
				let tempVal = parseFloat(value).toFixed(3)
				let realVal = tempVal.substring(0, tempVal.length - 1)
				return realVal
			},
			taskItem(id) {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '../task/taskItem?id=' + id
					});
				} else {
					this.goLoginInfo();
				}
			},
			//统一登录跳转
			goLoginInfo() {
				this.$queue.setData('href', '/pages/task/index');
				uni.navigateTo({
					url: '/package-task/pages/public/login'
				});
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.selectTask('');
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.selectTask('Refresh');
		}
	};
</script>

<style lang="less" scoped>
	@import '../../static/less/index.less';
	@import '../../static/css/index.css';

	page {
		background-color: #ffffff;
	}
</style>
